<!DOCTYPE html>
<html>
  <!--
  Copyright (c) 2010 The Native Client Authors. All rights reserved.
  Use of this source code is governed by a BSD-style license that can be
  found in the LICENSE file.
  -->
<head>
  <title>Hello, World!</title>

  <script type="text/javascript">
    hello_world = null;  // Global application object.
    status_text = 'NO-STATUS';

    function moduleDidLoad() {
      hello_world = document.getElementById('hello_world');
      updateStatus('SUCCESS');
    }

    // If the page loads before the Native Client module loads, then set the
    // status message indicating that the module is still loading.  Otherwise,
    // do not change the status message.
    function pageDidLoad() {
      if (hello_world == null) {
        updateStatus('LOADING...');
      } else {
        // It's possible that the Native Client module onload event fired
        // before the page's onload event.  In this case, the status message
        // will reflect 'SUCCESS', but won't be displayed.  This call will
        // display the current message.
        updateStatus();
      }
    }

    function fortytwo() {
      try {
        alert(hello_world.fortytwo());
      } catch(e) {
        alert(e.message);
      }
    }

    function helloworld() {
      try {
        alert(hello_world.helloworld());
      } catch(e) {
        alert(e.message);
      }
    }

    // Set the global status message.  If the element with id 'status_field'
    // exists, then set its HTML to the status message as well.
    // opt_message The message test.  If this is null or undefined, then
    //     attempt to set the element with id 'status_field' to the value of
    //     |status_text|.
    function updateStatus(opt_message) {
      if (opt_message)
        status_text = opt_message;
      var status_field = document.getElementById('status_field');
      if (status_field) {
        status_field.innerHTML = status_text;
      }
    }
  </script>
</head>
<body onload="pageDidLoad()">

<h1>Native Client Simple Module</h1>
<p>
  <button onclick="fortytwo()">Call fortytwo()</button>
  <button onclick="helloworld()">Call helloworld()</button>

  <!-- For development, use a #develop location, which loads the develop
  version of the module.
  -->
  <div id="nacl_helloworld_content"></div>
  <script type="text/javascript">
    contentDiv = document.getElementById('nacl_helloworld_content');
    if (window.location.hash == '#develop') {
      // Load the develop version of the module.
      contentDiv.innerHTML = '<embed name="nacl_module" '
                             + 'id="hello_world" '
                             + 'width=0 height=0 '
                             + 'type="pepper-application/hello_world" />';
      moduleDidLoad();
    } else {
      // Load the published .nexe.  This includes the 'nexes' attribute which
      // shows how to load multi-architecture modules.  Each entry in the
      // table is a key-value pair: the key is the runtime ('x86-32',
      // 'x86-64', etc.); the value is a URL for the desired NaCl module.
      var nexes = 'x86-32: hello_world_x86_32.nexe\n'
                  + 'x86-64: hello_world_x86_64.nexe\n'
                  + 'ARM: hello_world_arm.nexe ';
      contentDiv.innerHTML = '<embed name="nacl_module" '
                             + 'id="hello_world" '
                             + 'width=0 height=0 '
                          // + 'nexes="' + nexes + '" '
                             + 'type="application/x-nacl-srpc" '
                             + 'onload=moduleDidLoad() />';
      // Note: this code is here to work around a bug in Chromium build
      // #47357.  See also
      // http://code.google.com/p/nativeclient/issues/detail?id=500
      document.getElementById('hello_world').nexes = nexes;
    }
  </script>
</p>

<p>If the module is working correctly, a click on the "Call fortytwo" button
  should open a popup dialog containing <b>42</b> as value.</p>

<p> Clicking on the "Call helloworld" button
  should open a popup dialog containing <b>hello, world</b> as value.</p>

<h2>Status</h2>
<div id="status_field">NO-STATUS</div>
</body>
</html>
